<!-- HTML5文件 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
		<meta name="format-detection" content="telephone=no">
		<title>html title</title>

		<link rel="stylesheet" href="../assets/agile/css/agile.layout.css">
		<link rel="stylesheet" href="../assets/third/seedsui/plugin/seedsui/seedsui.min.css">
		<link rel="stylesheet" href="../assets/third/seedsui/plugin/animate/animate.css">
		<style>
			.titlebar,.tab.active{
				background-color:#18B2ED;
			}
			.titlebar h1,.tab.active label{
				font-weight:bold;
				color:white;
			}
			.titlebar a i,.titlebar a label{
				color:white;
			}
			.art_mid{
				top:45px;
				bottom:40px
			}
			.grid li i{
				color:#18B2ED;
			}
			.grid li label{
				color:#18B2ED;
				font-weight:bold;
				font-size:12px
			}
			/*图标动画*/
			.grid {
				background: #fff;
				margin:12px 0 0 0;
				border-top: 1px solid #ddd;	
				border-bottom: 1px solid #ddd;
				border-radius: 0 !important;
			}
		</style>
	</head>
	<body>
		<div id="section_container">
		 <section id="section_main" data-role="section" class="active">
		 	<header>
		 		<div class="titlebar" >
		 			<a class="left">
		 				<label class="bold"><i class="icon icon-arrowleft-fill"></i>登出</label>
		 			</a>
		 			<h1 class="text-center ">首页</h2>
		 			<a class="right">
		 				<i class="icon icon-menu-fill"></i>
		 			</a>
		 		</div>
		 	</header>
		 	<article id="article_main" data-role="article" data-transition="slide" data-scroll="verticle" class="active art_mid" >
		 		<div class="scroller">
		 			<div style="height:10em">
		 				pagemain
		 			</div>
		 			<div>
	    	          <ul class="grid size54 border" data-rowspace="12" data-col="2" id="grid_icon">
				       <main_grid v-for="(item,index) in girdlist"
				         v-bind:item="item"
				         v-bind:index="index"
				       />
	    	          </ul>
                    </div>
		 		</div>
		 	</article>
		 	<article id="article_serv"  data-role="article" data-transition="slide" data-scroll="verticle" class="art_mid" >
		 		<div class="scroller">
		 			pageserv
		 		</div>
		 	</article>
		 	<article id="article_conf" data-role="article" data-transition="slide" data-scroll="verticle" class="art_mid" >
		 		<div class="scroller">
		 			pageconfig
		 		</div>
		 	</article>
		 	<footer>
				<ul class="menubar" style="line-height: 40px;">
					<li class="tab active" data-role="tab" href="#article_main" data-toggle="article">
						<label class="text-center">首页</label>
					</li>
					<li class="tab " data-role="tab"  href="#article_serv" data-toggle="article">
						<label class="text-center">服务</label>
					</li>
					<li class="tab " data-role="tab"  href="#article_conf" data-toggle="article">
						<label class="text-center">设置</label>
					</li>
				</ul>
		 	</footer>
		 </section>
		</div>
		<script src="../assets/third/amd/require.js" ></script>
		<script src="../assets/app/js/app.require.js"></script>
		<script>
		 require(['vue','agile'],function(Vue){
		 	//注册全局图标控件
		 	Vue.component('main_grid',Vue.extend({
		 		template:'<li class=" animated flipInX"\
		 		            :style="otime"\
		 		            @tap="on_tap(item.url)">\
				       		<i class="icon " :class="item.img"></i>\
				       	    <label class="grid-label">{{item.name}}</label>\
				          </li>',
		 		props:{
		 			item:Object,
		 			index:Number
		 		},
		 		computed:{
		 			//用计算数据实现延时出现样式
		 			otime:function(){
		 				var tmptime  = (this.index+1)*100;
		 				tmptime =tmptime+"ms";
		 				return {
				           "animation-delay":tmptime,
				           "-webkit-animation-delay":tmptime
		 				};
		 			}
		 		},
		 		methods:{
		 			on_tap:function(url){
		 				A.showToast(url);
		 			}
		 		}
		 	})
		    );
		 	//grid实例
		 	var vm_grid = new Vue({
		 		el:'#grid_icon',
		 		data:{
		 		   girdlist:[]
		 		},
		 		computed:{
		 		  styleoj:function(){
		 		  	return '';
		 		  }},
		 		methods:{
		 			init_grid:function(listdata){
		 				this.girdlist = listdata;
		 			}
		 		}
		 	});
		 	
		 	$('#article_main').on('articleload',function(){
		 		var lst = [
		 		{img:"icon-chartpie",name:"功能1",url:"功能1"},
		 		{img:"icon-chartline",name:"功能2",url:"功能2"},
		 		{img:"icon-news",name:"功能3",url:"功能3"},
		 		{img:"icon-fileperson",name:"功能4",url:"功能4"},
		 		{img:"icon-shop",name:"功能5",url:"功能5"},
		 		{img:"icon-contact",name:"功能6",url:"功能6"}
		 		];
		 		
		 		vm_grid.init_grid(lst);
		 	});
		 	
		 });
		</script>
	</body>
</html>